<template>
  <div class="login-success-container">
    <div class="success-card">
      <div v-if="loading" class="loading-content">
        <div class="loading-spinner"></div>
        <p>正在处理登录...</p>
      </div>
      <div v-else-if="success" class="success-content">
        <div class="success-icon">✓</div>
        <h2 class="success-title">登录成功！</h2>
        <p class="success-message">正在跳转到首页...</p>
      </div>
      <div v-else class="error-content">
        <div class="error-icon">✕</div>
        <h2 class="error-title">登录失败</h2>
        <p class="error-message">{{ errorMessage }}</p>
        <button class="retry-btn" @click="goToLogin">返回登录</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '../../stores/user'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const loading = ref(true)
const success = ref(false)
const errorMessage = ref('')

// 处理登录成功回调
onMounted(async () => {
  const token = route.query.token
  
  if (!token) {
    loading.value = false
    errorMessage.value = '未获取到token参数'
    return
  }

  try {
    // 保存token（钉钉登录暂时只返回access token）
    userStore.setTokens(token, '')
    
    success.value = true
    loading.value = false
    
    // 延迟跳转到首页（根据用户角色跳转）
    const userType = localStorage.getItem('dingtalk_user_type') || 'jobseeker'
    const targetRoute = userType === 'recruiter' ? '/personal' : '/home'
    
    setTimeout(() => {
      router.push(targetRoute)
    }, 1500)
  } catch (error) {
    console.error('处理登录失败:', error)
    loading.value = false
    errorMessage.value = '处理登录时发生错误'
  }
})

// 返回登录页
const goToLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
.login-success-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.success-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 48px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  max-width: 400px;
  width: 100%;
}

.loading-content,
.success-content,
.error-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(0, 196, 143, 0.2);
  border-top-color: #00c48f;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.success-icon,
.error-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: bold;
}

.success-icon {
  background: #e6f7f2;
  color: #00c48f;
}

.error-icon {
  background: #fff1f0;
  color: #ff4d4f;
}

.success-title,
.error-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.success-title {
  color: #1a1a1a;
}

.error-title {
  color: #ff4d4f;
}

.success-message,
.error-message {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.retry-btn {
  margin-top: 12px;
  padding: 12px 24px;
  background: #00c48f;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.retry-btn:hover {
  background: #00b380;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 196, 143, 0.3);
}
</style>

